<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #echart {
      width: 800px;
      height: 500px;
    }
  </style>
  <body>
    <div id="echart"></div>
    <script src="./node_modules/echarts/dist/echarts.min.js"></script>
    <script>
      let echart = document.getElementById('echart')
      let myEchart = echarts.init(echart)
      // data中的value值  0表示是属于categories中的哪一类 1，2表示时间范围 3表示所占的时长
      var data = [
        {
          name: 'Nodes',
          value: [0, 1608991598383, 1608991605037, 6654],
          itemStyle: { normal: { color: '#75d874' } },
        },
        {
          name: 'Listeners',
          value: [0, 1608991605280, 1608991606570, 1290],
          itemStyle: { normal: { color: '#e0bc78' } },
        },
        {
          name: 'JS Heap',
          value: [0, 1608991607963, 1608991613345, 5382],
          itemStyle: { normal: { color: '#7b9ce1' } },
        },
        {
          name: 'GPU Memory',
          value: [0, 1608991614586, 1608991615224, 638],
          itemStyle: { normal: { color: '#dc77dc' } },
        },
        {
          name: 'JS Heap',
          value: [0, 1608991615842, 1608991616561, 719],
          itemStyle: { normal: { color: '#7b9ce1' } },
        },
        {
          name: 'JS Heap',
          value: [0, 1608991617912, 1608991619175, 1263],
          itemStyle: { normal: { color: '#7b9ce1' } },
        },
        {
          name: 'GPU',
          value: [0, 1608991620654, 1608991624374, 3720],
          itemStyle: { normal: { color: '#72b362' } },
        },
        {
          name: 'Documents',
          value: [0, 1608991624976, 1608991631226, 6250],
          itemStyle: { normal: { color: '#bd6d6c' } },
        },
        {
          name: 'JS Heap',
          value: [0, 1608991632080, 1608991638191, 6111],
          itemStyle: { normal: { color: '#7b9ce1' } },
        },
        {
          name: 'Nodes',
          value: [0, 1608991639425, 1608991646509, 7084],
          itemStyle: { normal: { color: '#75d874' } },
        },
        {
          name: 'Listeners',
          value: [1, 1608991598383, 1608991605845, 7462],
          itemStyle: { normal: { color: '#e0bc78' } },
        },
        {
          name: 'Listeners',
          value: [1, 1608991607554, 1608991615552, 7998],
          itemStyle: { normal: { color: '#e0bc78' } },
        },
        {
          name: 'Nodes',
          value: [1, 1608991615566, 1608991622979, 7413],
          itemStyle: { normal: { color: '#75d874' } },
        },
        {
          name: 'Listeners',
          value: [1, 1608991623267, 1608991625662, 2395],
          itemStyle: { normal: { color: '#e0bc78' } },
        },
        {
          name: 'GPU',
          value: [1, 1608991627560, 1608991635011, 7451],
          itemStyle: { normal: { color: '#72b362' } },
        },
        {
          name: 'GPU',
          value: [1, 1608991636996, 1608991646925, 9929],
          itemStyle: { normal: { color: '#72b362' } },
        },
        {
          name: 'Nodes',
          value: [1, 1608991647997, 1608991648993, 996],
          itemStyle: { normal: { color: '#75d874' } },
        },
        {
          name: 'Listeners',
          value: [1, 1608991649256, 1608991650772, 1516],
          itemStyle: { normal: { color: '#e0bc78' } },
        },
        {
          name: 'GPU Memory',
          value: [1, 1608991652367, 1608991660634, 8267],
          itemStyle: { normal: { color: '#dc77dc' } },
        },
        {
          name: 'GPU Memory',
          value: [1, 1608991662399, 1608991671753, 9354],
          itemStyle: { normal: { color: '#dc77dc' } },
        },
        {
          name: 'Listeners',
          value: [2, 1608991598383, 1608991602756, 4373],
          itemStyle: { normal: { color: '#e0bc78' } },
        },
        {
          name: 'GPU',
          value: [2, 1608991604287, 1608991607787, 3500],
          itemStyle: { normal: { color: '#72b362' } },
        },
        {
          name: 'Documents',
          value: [2, 1608991609402, 1608991612765, 3363],
          itemStyle: { normal: { color: '#bd6d6c' } },
        },
        {
          name: 'Documents',
          value: [2, 1608991614519, 1608991615817, 1298],
          itemStyle: { normal: { color: '#bd6d6c' } },
        },
        {
          name: 'Documents',
          value: [2, 1608991616380, 1608991618162, 1782],
          itemStyle: { normal: { color: '#bd6d6c' } },
        },
        {
          name: 'JS Heap',
          value: [2, 1608991618319, 1608991627713, 9394],
          itemStyle: { normal: { color: '#7b9ce1' } },
        },
        {
          name: 'JS Heap',
          value: [2, 1608991629188, 1608991633037, 3849],
          itemStyle: { normal: { color: '#7b9ce1' } },
        },
        {
          name: 'GPU Memory',
          value: [2, 1608991633362, 1608991633897, 535],
          itemStyle: { normal: { color: '#dc77dc' } },
        },
        {
          name: 'Documents',
          value: [2, 1608991635616, 1608991645000, 9384],
          itemStyle: { normal: { color: '#bd6d6c' } },
        },
        {
          name: 'Documents',
          value: [2, 1608991645658, 1608991646915, 1257],
          itemStyle: { normal: { color: '#bd6d6c' } },
        },
      ]
      var dataCount = 10
      var startTime = 1608991598383
      var categories = ['categoryA', 'categoryB', 'categoryC']
      var types = [
        { name: 'JS Heap', color: '#7b9ce1' },
        { name: 'Documents', color: '#bd6d6c' },
        { name: 'Nodes', color: '#75d874' },
        { name: 'Listeners', color: '#e0bc78' },
        { name: 'GPU Memory', color: '#dc77dc' },
        { name: 'GPU', color: '#72b362' },
      ]

      // Generate mock data
      // echarts.util.each(categories, function (category, index) {
      //   var baseTime = startTime
      //   for (var i = 0; i < dataCount; i++) {
      //     var typeItem = types[Math.round(Math.random() * (types.length - 1))]
      //     var duration = Math.round(Math.random() * 10000)
      //     data.push({
      //       name: typeItem.name,
      //       value: [index, baseTime, (baseTime += duration), duration],
      //       itemStyle: {
      //         normal: {
      //           color: typeItem.color,
      //         },
      //       },
      //     })
      //     baseTime += Math.round(Math.random() * 2000)
      //   }
      //   console.log(JSON.stringify(data))
      // })

      function renderItem(params, api) {
        console.log(params, api)
        console.log(api.value(0), api.value(1), api.value(2))
        var categoryIndex = api.value(0) //对应的三类中的一类
        var start = api.coord([api.value(1), categoryIndex]) //起始点坐标
        var end = api.coord([api.value(2), categoryIndex]) //结束点坐标
        var height = api.size([0, 1])[1] * 0.3
        console.log(api.value(2) - api.value(1))
        return {
          type: 'rect',
          shape: {
            // 在(x,y)坐标点画宽高为多少的矩形
            x: start[0], //x坐标
            y: start[1] - height / 2, //y坐标
            width: end[0] - start[0], //宽
            height: height, //高
          },
          style: api.style(),
        }
      }
      option = {
        tooltip: {
          formatter: function (params) {
            return params.marker + params.name + ': ' + params.value[3] + ' ms'
          },
        },
        title: {
          text: 'Profile',
          left: 'center',
        },
        grid: {
          height: 300,
        },
        // x轴会动态将日期格式化
        xAxis: {
          min: startTime,
          scale: true,
          axisLabel: {
            formatter: function (val) {
              console.log(startTime, val)
              // 将日期进行整合处理
              console.log(new Date(val))
              return Math.max(0, val - startTime) + ' ms'
            },
          },
        },
        yAxis: {
          data: categories,
        },
        series: [
          {
            type: 'custom',
            renderItem: renderItem,
            //指定x映射的是data数组中每一个元素中value的第几个值
            //将值收集起来并且进行统一范围处理  比如上面的data中有30个值就会把30个值收集然后进行10s的一个间隔进行区间处理生成x轴
            encode: {
              x: [1, 2],
              y: 0,
            },
            data: data,
          },
        ],
      }
      myEchart.setOption(option)
    </script>
  </body>
</html>
